<template>
    <div>
        <el-dialog width="500px"
                   :title="titleHandle"
                   :close-on-click-modal="false"
                   :visible.sync="visible"
                   :append-to-body="true"
                   @closed="loading = false">
            <el-form :model="dataForm"
                     :rules="dataRule"
                     ref="dataForm">
                <el-row :gutter="20">
                    <!-- 姓名 -->
                    <el-col :span="12">
                        <el-form-item :label="$t('common.name')" prop="userName">
                            <el-input v-model="dataForm.userName"
                                      :clearabl="true"
                                      :placeholder="$t('common.input')"
                                      :disabled=true>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 日期 -->
                    <el-col :span="12">
                        <el-form-item :label="$t('common.date')" prop="dailyTime">
                            <el-input v-model="dataForm.dailyTime"
                                      :clearable="true"
                                      :placeholder="$t('common.input')"
                                      :disabled="true">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <!-- 项目编号 -->
                    <el-col :span="12">
                        <el-form-item :label="$t('statistic.projectNumber')" prop="projectNumber">
                            <el-input v-model="dataForm.projectNumber"
                                      :clearable="true"
                                      :placeholder="$t('common.input')"
                                      :disabled="operation === 'view'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 项目子模块 -->
                    <el-col :span="12">
                        <el-form-item :label="$t('statistic.projectSubmodule')" prop="projectSubModule">
                            <el-input v-model="dataForm.projectSubModule"
                                      :clearable="true"
                                      :placeholder="$t('common.input')"
                                      :disabled="operation === 'view'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <!-- 用时 -->
                    <el-col :span="12">
                        <el-form-item :label="$t('statistic.timeCost')"
                                      prop="timeSpent">
                            <el-input v-model="dataForm.timeSpent"
                                      :clearable="true"
                                      :placeholder="$t('common.input')"
                                      :disabled="operation === 'view'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 完成情况 -->
                    <el-col :span="12">
                        <el-form-item :label="$t('statistic.completion')"
                                      prop="completeStatus">
                            <el-select v-model="dataForm.completeStatus"
                                       :clearable="true"
                                       :placeholder="$t('common.select')"
                                       value=""
                                       :disabled="operation === 'view'">
                                <el-option v-for="item in completionList"
                                           :key="item.value"
                                           :label="$t('statistic.'+ item.label)"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <!-- 工作内容 -->
                    <el-col :span="24">
                        <el-form-item :label="$t('statistic.workContent')" prop="jobContent">
                            <el-input v-model="dataForm.jobContent"
                                      type="textarea"
                                      :rows="2"
                                      :clearable="true"
                                      maxlength="100"
                                      :show-word-limit="true"
                                      :placeholder="$t('common.input')"
                                      :disabled="operation === 'view'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <!-- 备注 -->
                    <el-col :span="24">
                        <el-form-item :label="$t('common.remark')"
                                      prop="remark">
                            <el-input v-model="dataForm.remark"
                                      type="textarea"
                                      :rows="2"
                                      :clearable="true"
                                      maxlength="100"
                                      :show-word-limit="true"
                                      :placeholder="$t('common.input')"
                                      :disabled="operation === 'view'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!--取消按钮-->
                <el-button @click="visible = false"
                           v-show="operation !== 'view'">
                    {{$t('common.cancel')}}
                </el-button>
                <!--导出-->
                <el-button type="primary"
                           @click="download()"
                           icon="el-icon-download"
                           v-show="operation === 'view'">
                    {{$t('common.download')}}
                </el-button>
                <!--确定按钮-->
                <el-button type="primary"
                           :loading="loading"
                           @click="dataFormSubmit">
                    {{$t('common.submit')}}
                </el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
import { COMPLETION_LIST } from '@/constant/app-list-constant'
import { titleHandle } from '@/utils'
import operationApi from '@/api/operation/operation'
import { apiDefaultErrorHandler } from '../../api/base'
import { success } from '@/utils/message'

export default {
  name: 'info',
  props: {
    operation: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      visible: false,
      dataForm: {
        id: '',
        userName: '',
        dailyTime: '',
        projectNumber: '',
        projectSubModule: '',
        jobContent: '',
        timeSpent: '',
        completeStatus: '',
        remark: ''
      },
      completionList: COMPLETION_LIST(),
      dataRule: {
        timeSpent: [
          {
            required: true,
            message: this.$t('statistic.timeSpentNotEmpty'),
            trigger: 'blur'
          }],
        completeStatus: [
          {
            required: true,
            message: this.$t('statistic.completeStatusNotEmpty'),
            trigger: ['blur', 'change']
          }]
      }
    }
  },
  computed: {
    titleHandle: function () {
      return titleHandle(this.operation)
    }
  },
  methods: {
    /**
             *初始化
             */
    init (id) {
      this.visible = true
      this.dataForm.id = id
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
            operationApi.getStatisticInfo(this.dataForm.id).then(({ data }) => {
            if (this.$http.isResponseSuccess(data)) {
              this.dataForm = data.statistic
            } else {
              apiDefaultErrorHandler(data)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          })
        }
      })
    },
    /**
     * 表单提交
     */
    dataFormSubmit () {
      if (this.operation === 'view') {
        this.visible = false
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        this.loading = true
        if (valid) {
          (operationApi.updateStatistic(this.dataForm)).then(({ data }) => {
            if (this.$http.isResponseSuccess(data)) {
              success(this.$t('common.success'), () => {
                this.visible = false
                this.loading = false
                this.$emit('confirm')
              })
            } else {
              apiDefaultErrorHandler(data)
              this.loading = false
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    },
    /**
       * 下载
       */
    download () {
      this.$parent.exportData()
    }
  }
}
</script>

<style scoped>

</style>
